<template>
  <div class="login">
    <div class="head">
      <h1>短信验证码登录</h1>
    </div>
    <div class="content">
      <div class="bts">
        <input type="text" placeholder="  国家和地区
                                          中国"/>
      </div>
      <div class="ipone">
        <span>+86</span>
        <div class="ips">
            <input type="text" placeholder="手机号"  v-model="cell" >
        </div>
      </div>
      <div class="session">
        <div class="left">
            <input type="text" placeholder="  短信验证码"  v-model="session">
        </div>
        <div class="right">
            <span @click="sendSession">获取验证码</span>
        </div>
      </div>
      <div class="go">
         <span @click="login">登录</span>
      </div>
      <div class="text">
         <p>未注册的手机号验证后将自动注册</p> <h3>账号密码登录</h3>
      </div>
      <div class="img">
        <img src="../assets/img/log.png" alt="">
      </div>
      <div class="last">
        <span>登录代表你已同意</span><span class="con">用户协议</span><span>和</span><span class="con">隐私政策</span>
      </div>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant"
export default {
    data() {
        return {
            cell:'',
            session:'',

        }
    },
    methods: {
        sendSession(){
            console.log(this);
             let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              if(!reg.test(this.cell)){
                    Toast("手机号码错误");
                    return;
              }else{
                //  this.$toast("验证码已发送")
              }
        },
        login(){
            let code = /^[0-9]{4}$/;
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
             if(!code.test(this.session)&&!reg.test(this.cell)){//不正确处理
                    // this.$toast("请输入正确手机号码与验证码");
                    return;
              }
              else{
                this.$router.push('/cart')
                window.localStorage.setItem("token",this.cell);
                 window.localStorage.setItem('btindex',3)
              
              }
        }
    },
};
</script>

<style lang="scss" scoped>
.login {
  .head {
    width: 100%;
    height: 50px;
    background-color: rgb(20, 20, 20);
    h1 {
      width: 80%;
      margin: 0 auto;
      height: 50px;
      line-height: 50px;
      color: white;
      text-align: center;
      font-size: 18px;
    }
  }
  .content {
    padding-top: 30px;
    
    width: 100%;
    background-color: rgb(236, 236, 236);
    .bts {
      width: 90%;
      margin: 0 auto;
      input {
        width: 100%;
        height: 46px;
        background-color: #fff;
        border: 1px solid #d1d1d1;
        border-radius: 4px;
        box-shadow: 0 3px 5px -4px rgb(0 0 0 / 40%) inset,
          -1px 0 3px -2px rgb(0 0 0 / 10%) inset;
      }
    }
    .ipone{
        width: 90%;
        height: 46px;
      margin: 0 auto;
      margin-top: 20px;
      display: flex;
      span{
        display: block;
        width: 20%;
        text-align: center;
        padding-top: 15px;
        background-color: #fff;
         border: 1px solid #d1d1d1;
         color:  #9c9b9b;
         border-right: 0px;
        border-radius: 4px;
        border-bottom-right-radius: 0px;
         border-top-right-radius: 0px;

          box-shadow: 4px -2px 5px -4px rgb(0 0 0 / 40%) inset, -1px 0 3px -2px rgb(0 0 0 / 10%) inset;
      }
       .ips{
        width: 80%;
         input{
          width: 100%;
            height: 46px;
        background-color: #fff;
        border: 1px solid #d1d1d1;
        border-left: 0px;
        border-radius: 4px;
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
         box-shadow: -1px -4px 5px -4px rgb(0 0 0 / 40%) inset, -1px 0 3px -2px rgb(0 0 0 / 10%) inset;
}
       }
    }
    .session{
         width: 90%;
      margin: 0 auto;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .left{
        width: 60%;
        input{
             height: 46px;
        background-color: #fff;
        border: 1px solid #d1d1d1;
        border-radius: 4px;
        box-shadow: 0 3px 5px -4px rgb(0 0 0 / 40%) inset,
          -1px 0 3px -2px rgb(0 0 0 / 10%) inset;
        }
      }
      .right{
        width: 40%;
        span{
            display: block;
            width: 100%;
            height: 46px;
                font-size: 15px;
                line-height: 46px;
            font-weight: 700;
            border: 1px solid #d1d1d1;
            border-radius: 5px;
            text-align: center;
   
    color: rgba(0,0,0,.4)
        }
      }
    }
    .go{
        width: 90%;
        margin: 0 auto;
        height:51px;
        margin-top: 20px;
        span{
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 46px;
            color: white;
            background: linear-gradient(#9db4eb,#8c9ed1);
            border-radius: 5px;
        }
    }
    .text{
          width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        p{
            font-size: 13px;
            color: #9c9b9b;
        }
        h3{
            font-size: 13px;
            color: blue;
        }
    }
    .img{
         width: 70%;
         margin: 0 auto;
        margin-top: 190px;
        img{
            height: 50px;
            display: block;
            margin:  0 auto;
            
        }
    }
    .last{
         width: 80%;
         margin: 0 auto;
         margin-top: 20px;
         text-align: center;
         span{
            font-size: 14px;
            color: #7f7f7f;
         }
         .con{
            font-size: 16px;
            color: #5C89F2;
         }
    }
  }
}
</style>